<!-- author: xuett -->
<!-- date: 2025-07-29 11:09:49 -->
<!-- description: 报告详情弹窗 -->
<template>
  <el-dialog v-model="visible" title="报告详情" width="800px" top="5vh" append-to-body>
    <div class="form-box">
      <el-form>
        <el-row>
          <el-col :span="24">
            <el-form-item label="主体名称" prop="orgName">{{ curReportInfo.nickName }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="统一代码" prop="orgName">{{ curReportInfo.authId }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告编号" prop="orgName">{{ curReportInfo.reportNo }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 处罚 -->
      <el-collapse expand-icon-position="left">
        <!-- 遍历领域 -->
        <el-collapse-item v-for="area in areaList" :name="area.areaName">
          <template #title>
            <div class="collapse-title">
              <div class="left-title1">{{ area.areaName }}</div>
            </div>
          </template>
          <template v-if="area.list.length">
            <el-collapse expand-icon-position="left">
              <!-- 遍历领域下处罚类型 -->
              <el-collapse-item v-for="typeItem in area.list" :name="typeItem.cfType">
                <template #title>
                  <div class="collapse-title">
                    <div class="left-title2">{{ typeItem.cfType }}</div>
                  </div>
                </template>
                <template v-if="typeItem.list.length">
                  <!-- 遍历类型下 处罚条目 -->
                  <el-collapse expand-icon-position="left">
                    <el-collapse-item v-for="cf in typeItem.list" :name="cf.ossId">
                      <template #title>
                        <div class="collapse-title">
                          <div class="left-title">{{ createCfTitle(cf) }}</div>
                        </div>
                      </template>
                      <!-- 公安特殊判断 -->
                      <template v-if="cf.field == '公安' && cf.scope == '刑事裁判'">
                        <table class="cf-table">
                          <tbody>
                            <tr>
                              <td>犯罪记录</td>
                              <td colspan="3">{{ cf.data['犯罪记录'] }}</td>
                            </tr>
                          </tbody>
                        </table>
                      </template>
                      <template v-else>
                        <table class="cf-table">
                          <tbody>
                            <!-- 一行放两个字段，奇数个则最后一个占一行 -->
                            <tr v-for="i in Math.ceil(xydzCfObj[cf.scope].length / 2)">
                              <td style="width: 150px">{{ xydzCfObj[cf.scope][i * 2 - 2].name }}</td>
                              <td :colspan="i * 2 - 1 == xydzCfObj[cf.scope].length ? 3 : 1">
                                {{ cf.data[xydzCfObj[cf.scope][i * 2 - 2].prop] ? cf.data[xydzCfObj[cf.scope][i * 2 - 2].prop] : '' }}
                              </td>
                              <template v-if="i * 2 <= xydzCfObj[cf.scope].length">
                                <td style="width: 150px">{{ xydzCfObj[cf.scope][i * 2 - 1].name }}</td>
                                <td>{{ cf.data[xydzCfObj[cf.scope][i * 2 - 1].prop] ? cf.data[xydzCfObj[cf.scope][i * 2 - 1].prop] : '' }}</td>
                              </template>
                            </tr>
                          </tbody>
                        </table>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </template>
              </el-collapse-item>
            </el-collapse>
          </template>
          <template v-else>
            <div class="empty-text">该领域无处罚信息</div>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-dialog>
</template>

<script setup name="SelectUser" lang="ts">
import { DissentVO, cfItemVo } from '@/api/xydz/dissent/types';
import { getReportDetail } from '@/api/xydz/history/index';
import xydzCfList from '@/assets/js/xydz_cf';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $emit = defineEmits(['updateList']);

//生成处罚条目内容
let xydzCfObj = {};
xydzCfList.forEach((item) => {
  xydzCfObj[item.name] = item.propsList;
});

const state = reactive({
  curReportInfo: {} as DissentVO,
  areaList: [],
  cfList: [] as cfItemVo[],
  visible: false
});
const { curReportInfo, areaList, cfList, visible } = toRefs(state);

const show = (row: DissentVO) => {
  state.curReportInfo = row;
  state.visible = true;
  getDetail(row.id);
};

//获取详情
const getDetail = (id: string) => {
  getReportDetail(id).then((res) => {
    let areaObj = res.data['领域'];
    Object.keys(areaObj).forEach((areaKey) => {
      let cfList = [];
      Object.keys(areaObj[areaKey]).forEach((cfKey) => {
        if (xydzCfObj[cfKey]) {
          areaObj[areaKey][cfKey].forEach((item) => {
            item.data = item.data ? JSON.parse(item.data) : {};
          });
        }
        cfList.push({
          cfType: cfKey,
          list: areaObj[areaKey][cfKey]
        });
      });
      state.areaList.push({
        areaName: areaKey,
        list: cfList
      });
    });
  });
};

//生成处罚条目title
const createCfTitle = (row) => {
  let title = '';
  switch (row.scope) {
    case '行政处罚':
      title = `决定文书号(${row.data.cf_wsh})`;
      break;
    case '行政强制':
      title = `决定文书号(${row.data.xz_qz_jdwsh})`;
      break;
    case '刑事裁判':
      title = row.data.hrijnsowti ? `案号(${row.data.hrijnsowti})` : '(公安)刑事裁判';
      break;
    case '严重失信主体名单':
      title = `${row.data.sxmdzl}(${row.data.lrrq})`;
      break;
  }
  return row.scope + '———' + title;
};

const createCfContent = (row) => {
  let html = '';
  let propsList = xydzCfObj[row.scope];
  propsList.forEach((item, index) => {
    html += index % 2 ? '' : '<tr>';
    html += `
        <td style="width: 150px">${item.name}</td>
        <td >${row.data[item.prop] ? row.data[item.prop] : ''}</td>`;
    html += index % 2 ? '</tr>' : '';
  });
  if (propsList.length % 2) {
    html += '</tr>';
  }
  html += `
    <tr>
      <td>佐证材料</td>
      <td colspan="3">${row.evidenceName}</td>
    </tr>`;
  if (row.status == '1' || row.status == '2') {
    html += `
      <tr >
        <td>${row.status == '1' ? '驳回意见' : '完成备注'}</td>
        <td colspan="3">${row.remark ? row.remark : ''}</td>
      </tr>`;
  }

  return html;
};

// 暴露
defineExpose({
  show
});
</script>

<style lang="scss" scoped>
.form-box {
  width: 100%;
}
.collapse-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left-title1 {
    font-size: 18px;
    font-weight: bold;
  }
  .left-title2 {
    font-size: 16px;
    font-weight: bold;
  }
}
.cf-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f6f6f6;
  :deep(td) {
    padding: 5px;
    border: 1px solid #666;
    font-size: 14px;
    &:nth-child(odd) {
      font-weight: bold;
    }
  }
}
.empty-text {
  text-align: center;
  line-height: 40px;
}
</style>
